<template>
    <view>
        <azNavbar navtype="default" customClass="bg-main">
            <template v-slot:header>
                <view class="bg-main" style="width: 100%; height: 100%">
                    <view class="padding-lr-sm flex align-center" style="height: 100%">
                        <text class="text-white">我的</text>
                    </view>
                </view>
            </template>
        </azNavbar>

        <view class="user-bg">
            <view class="bg-wallet-card"></view>
        </view>

        <view @click="pageLink" class="flex align-center padding-sm justify-between user-cont">
            <view class="flex align-center">
                <image v-if="memberStore.userInfo.headimgurl" :src="memberStore.userInfo.headimgurl" class="size-img-sm round" mode="widthFix" />
                <image v-else src="@/static/avatar.png" class="size-img-sm round" mode="widthFix" />
                <view class="text-white text-lg margin-left-sm text-base">
                    <template v-if="Object.keys(memberStore.userInfo).length > 0">
                        <view class="flex align-center">
                            <view class="text-lg">{{ memberStore.userInfo.truename }}</view>
                        </view>
                        <view class="margin-top-xs text-lg">{{ memberStore.userInfo.mobile }}</view>
                    </template>
                    <template v-else>
                        <view class="text-lg">未登录</view>
                    </template>
                </view>
            </view>
            <text class="cuIcon-right text-lg text-white"></text>
        </view>

        <view>
            <userMoney :data="memberData" />
            <userOrder :data="memberData" />
            <userServe :data="memberData" />
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import azNavbar from "@/components/common/az-navbar.vue";
import { useSystemStore } from "@/store/module/system";
import { useMemberStore } from "@/store/module/member";
import { goPage } from "@/utils/index";
import { useGetUserinfo } from "@/hooks/getuserinfo";
import { getIndexApi } from "@/api/user";
import userMoney from "@/components/user/user-money.vue";
import userOrder from "@/components/user/user-order.vue";
import userServe from "@/components/user/user-serve.vue";

const memberStore = useMemberStore();
const systemStore = useSystemStore();
const memberData = ref<AnyObject>({});

let customH: string = "0px";
// #ifdef H5
customH = "0px";
// #endif
// #ifndef H5
customH = systemStore.customHeight + "px";
// #endif

const pageLink = () => {
    if (memberStore.userInfo.username) {
        goPage("/pages/user/setting");
    } else {
        goPage("/pages/user/login", false);
    }
};

const getMemberData = async () => {
    const res: AnyObject = await getIndexApi({ username: memberStore.userInfo.username });
    if (res.code == 200) {
        memberData.value = res.data;
    }
};

onShow(() => {
    useGetUserinfo();
    getMemberData();
});
</script>

<style lang="scss" scoped>
.user-bg {
    position: absolute;
    top: v-bind(customH);
    left: 0;
    width: 100%;

    .bg-wallet-card {
        width: 100%;
        height: 320rpx;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .bg-wallet-card::after {
        content: "";
        width: 160%;
        height: 320rpx;
        position: absolute;
        left: -30%;
        top: 0;
        z-index: 1;
        border-radius: 0 0 50% 50%;
        background-color: $uni-color-red;
        // background-image: linear-gradient(180deg, #ff7a03, #ffad3c);
    }
}

.user-cont {
    position: relative;
    z-index: 99;
}
</style>
